<template>
  <section class="container">
    <transition name="fade-in">
      <div v-if="stepy === 1" class="main" :class="{'mainbg':orderId.length<3 }" >
        <div class="main"   v-if="!noAd" :class="{'mainbg':orderId.length<3 }">
          <div class="header">
            <div class="left-btn" @click="registerClick">如何1使用</div>
            <div class="right-btn" @click="record">购买1记录</div>
          </div>
          <div class="list-box" :style="{height:fullHeight}">
            <div class="item"  v-for="item in ADList" :key="item.id">
                <div class="item-top">
                  <div class="tit">
                    <div class="item-tit">{{item.name}}</div>
                    <div class="member">六个轮子会员专享</div>
                  </div>
                  <div class="sub-tit">{{item.content}}</div>
                </div>
                <div class="phone-text">电话：<span>{{item.shopPhone}}</span></div>
                <div class="adder">地址：<span>{{item.shopAddress}}</span><span class="text" v-if="appLng">（距您{{item.distance/1000}}km）</span></div>
                <div class="time">营业时间：<span>{{item.bussinessTime }}</span></div>
              <div class="pay-btn" :data-id="item.id" :data-buyPrice="item.buyPrice" @click="payBtn(item.buyPrice,item.id)">{{item.buyPrice}}元抢优惠<i></i></div>
            </div>
          </div>
          <!-- 支付 -->
          <div class="shade" :class="{ 'bg': isActive, 'modal_show': isActive }" >
            <div class="share" :class="{ 'fadeInUpBig': isActive, 'fadeInDownBig': !isActive }">
              <div class="pop-up-header">余额不足，请选择<span style="float:right;margin-right:0.3rem"   @click='clearBtn'>X</span></div>
              <div class="practical">需要付款<span>{{buyPrice}}</span></div>
              <div class="type type1">
                <label><input name="chargeType" type="radio" value="1" v-model="type"/>
                  <i class="icon-alipay icon"></i>支付宝支付
                  <i class="selectIcon" v-bind:class="{selected:type == 1}"></i>
                </label>
                <label><input name="chargeType" type="radio" value="2" v-model="type" />
                  <i class="icon-wepay icon"></i>微信支付
                  <i class="selectIcon" v-bind:class="{selected:type == 2}"></i>
                </label>
              </div>
              <div  class="btn" @click='payBtn1' >确&nbsp;认&nbsp;支&nbsp;付</div>
            </div>
          </div>
          <!-- 短信 -->
          <div class="note" :class="{ 'bg': isNote, 'modal_show': isNote }" >
            <div class="dialog">
              <i class="note-tit"></i>
              <div class="note_content">
                <p>1、首先在“六个轮子”APP中抢购相应的优惠，购买后24小时有效！</p>
                <p>2、到对应的店铺完成消费； </p>
                <p>3、在结算时打开“六个轮子”APP；</p>
                <p>4、进入个人中心>我的优惠券;</p>
                <p>5、向商家展示一下即可享受六个轮子会员专享的优惠买单啦！</p>
              </div>
              <div class="note_btnBox">
                <div class="clear_send" @click="clearClick()">我知道了</div>
              </div>
            </div>
          </div>
        </div>
        <div class="noAd" v-if="noAd" >
          <p>当前城市未开通</p>
        </div>
      </div>
  </transition>
  <transition name="fade-in" >
      <div class="fall" v-if="stepy === 2">
        <!-- <div class="goback" @click="goback()" >返回</div> -->
        <div class="main1" v-if="q_user_ad.length!=0">
          <div class="list-box" :style="{height:fullHeight}">
            <div class="item"  v-for="item in q_user_ad">
                <div class="item-top">
                  <div class="tit">
                    <div class="item-tit">{{item.productName}}</div>
                    <div class="member">六个轮子会员专享</div>
                  </div>
                  <div class="sub-tit">{{item.content}}</div>
                </div>
                <div class="phone-text">电话：<span>{{item.shopPhone}}</span></div>
                <div class="adder">地址：<span>{{item.shopAddress}}</span></div>
                <div class="time">营业时间：<span>{{item.bussinessTime }}</span></div>
                <div class="time">失效时间：<span>{{item.expireTime }}</span></div>
            </div>
          </div>
        </div>
        <div class="nodata" v-if="q_user_ad.length==0">
          <p>暂无购买记录</p>
        </div>
      </div>
    </transition>
    <simplert ref="simplert"></simplert>
  </section>
</template>
<script>
var wx = require('weixin-js-sdk');
  import Simplert from '../../components/dialog/dialog.vue'
  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  };

  export default{
    data () {
      return {
        fullHeight:(document.documentElement.clientHeight*2-280)/100 +'rem',
        // token:"eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzZWNhciIsImFwcGtleSI6IjE3NzE3MDg3NjIxIiwic2VjcmV0IjoiMTZhMjc0NmVlNzRhN2I2N2U1YjcyMzlkODg0MWMyZGYifQ.4vvNLOaesILcj4oPBQsZO4LTjyOHzcyll1gDLNoePy8",
        token:"",
        areaCode:"",
        orderId:"",
        stepy:1,
        state:true,
        ADList:[],
        type:1,
        isActive:false,
        appLng:'',
        appLat:'',
        postState:false,
        isNote:false,
        buyPrice:0,
        q_user_ad:[],   //购买记录
        isGoback:false, //小程序兼容顶部判断
        noAd:false,     //城市未开通 判断
        nodata:false,   //购买数据判断
        wxuser:''
      }
    },
    mounted(){
      const _this = this;
      //native充值结果返回
      window.payResult = (result,msg)=>{
        if(result === 'true' || result == 1)
        {
          let userAgentObj = navigator.userAgent;
          if(userAgentObj.match(/Android/i)){
            window.control.refreshWallet();
          }else if(userAgentObj.match(/iPhone/i))
          {
            refreshWallet();
          }
          this.open('购买成功！',false,'','','fade_success',function(){
            _this.record()
          });
        }else{
          this.open(msg,false,'','','fade_alert',function(){});
        }
      };
      let url = window.location.href;
      // alert(JSON.stringify(url))
      this.areaCode = filters.parseURL(url).params.areaCode;
      if(url.indexOf('orderId')>0){
        this.orderId = filters.parseURL(url).params.orderId;
      }else{
        this.orderId =''
      }
      if(url.indexOf('wxuser')>0){
        this.wxuser = filters.parseURL(url).params.wxuser;
      }
      this.appLng = filters.parseURL(url).params.appLng;
      this.appLat = filters.parseURL(url).params.appLat;
      this.wxuser = filters.parseURL(url).params.wxuser;
      if(url.indexOf('wx_app')>0){
        this.wx_app = filters.parseURL(url).params.wx_app;
        this.detail = filters.parseURL(url).params.detail;
        if(this.detail){
          this.isGoback=true
        }
      }else{
        this.wx_app = ''
      }
      // _this.list();
      this.$util.getUserToken().then(token=>{
        _this.token = token;
        _this.list();
        if(_this.wxuser=='1'){
          _this.record()
        }
      }).catch(e=>{
         _this.open('数据获取失败',false,'','','fade_alert',function(){});
      })
      // if(url.indexOf('wx_app')>0){
      //   let newUrl = this.$util.wxUrl(url);
      //   // 小程序分享title，url
      //   wx.miniProgram.postMessage({
      //     data: {
      //       title: '',
      //       wx_url: newUrl
      //     }
      //   })
      // }
    },
    components: {
      Simplert

    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      list(){
        let _this = this;
        _this.$api.get('/ad/v1/authApi/list?orderId='+this.orderId+'&areaCode='+this.areaCode+'&lng='+this.appLng+'&lat='+this.appLat+'&pageNo=0&pageSize=50',{},s=>{
          console.log(s.module)
          if(s.module){
            _this.ADList=s.module.list
          }
        },f=>{
          if(f.resultCode=="30031"){
            _this.noAd=true;
          }else{
            _this.open(f.errorMessage,false,'','','fade_alert',function(){});
          }
        },{
          'requestPlatform': this.wx_app,
          "token": this.token
        })
      },
      wxGoback(){
        wx.miniProgram.reLaunch({url: '../index/index'})
      },
      // 关闭支付弹窗
      clearBtn(){
        this.isActive=false
      },
      // 关闭如何使用弹窗
      clearClick(){
        this.isNote=!this.isNote
      },
      // 购买记录
      record(){
        this.stepy++;
        let _this =this;
        _this.$api.get('/ad/v1/authApi/q_user_ad_od?pageNo=0&pageSize=50',{},s=>{
          console.log(s.module)
          if(s.module){
            _this.q_user_ad=s.module.list
          }else{
            this.nodata=true
          }

        },f=>{
          _this.open(f.errorMessage,false,'','','fade_alert',function(){});
        },{
          'requestPlatform': this.wx_app,
          "token": this.token
        })
      },
      registerClick(e){
        this.isNote=!this.isNote
      },
      goback(){
        this.stepy--;
      },
      payBtn(buyPrice,id){
        // let adProductId = e.target.getAttribute('data-id');
        let adProductId = id;
        this.buyPrice=buyPrice;
        if(!this.wx_app){
            let userAgentObj = navigator.userAgent;
            if(userAgentObj.match(/MicroMessenger/i)){
              if(userAgentObj.match(/Android/i)){
                window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
              }else if(userAgentObj.match(/iPhone/i)) {
                window.setTimeout(function(){
                  window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                },200)
              }else{
                window.location.href="http://download.xingjiakeji.com/";
              }
              return;
            }else{
              if(!this.token || this.token == undefined || this.token == ""){
                window.setTimeout(function(){
                  if(userAgentObj.match(/Android/i)){
                    window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919';
                  }else if(userAgentObj.match(/iPhone/i)) {
                    window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                  }
                },1000);
                return;
              }
            }
        }

        if(this.postState){
          return
        }else{
          this.postState = true;
        }
        const _this = this;
        this.open('确认购买',true,'确认',function(){
          _this.$api.post('/trade/v1/authApi/money/pay/orderAndPayAdProduct?adProductId='+adProductId,{},s=>{
            _this.postState = false;
            let userAgentObj = navigator.userAgent;
            _this.open('购买成功',false,'','','fade_success',function(){
              _this.record();
              // //兼容小程序
              // if(_this.wx_app){
              //     if(_this.detail == 'true'){
              //       wx.miniProgram.reLaunch({url: '../detail/detail?orderId=' + _this.orderId})
              //     }
              // }else{
              //   if(userAgentObj.match(/Android/i)){
              //     window.control.refreshWallet();
              //   }else if(userAgentObj.match(/iPhone/i)){
              //     refreshWallet();
              //   }
              //   _this.$router.go(-1)
              // }
            })
          },f=>{
            _this.postState = false;
            if(f.resultCode == '30006'){
              // _this.isActive=true
              // _this.open('余额不足请先充值！',true,'充值',function(){
                let userAgentObj = navigator.userAgent;
                //兼容小程序
                if(_this.wx_app){//小程序支付
                  wx.miniProgram.navigateTo({url: '../user/balance/balance?detail=true'})
                }else{//app处理逻辑
                  // _this.open('',false,'知道了',function(){},'',function(){},"余额不足，请前往个人中心->我的钱包,充值后再尝试购买！如有疑问，请联系客服！")
                  if(userAgentObj.match(/Android/i)){
                    window.control.payDialog(_this.buyPrice);
                  }else if(userAgentObj.match(/iPhone/i)){
                    payDialog(_this.buyPrice);
                  }
                }
              // })
            }else if(f.errorMessage){
              _this.open(f.errorMessage,false,'','','fade_alert',function(){});
            }else{
              _this.open('购买失败',false,'','','fade_alert',function(){

              });
            }
          },{
            'requestPlatform': _this.wx_app,
            'token': _this.token
          })
        },'',function(){
          _this.postState = false;
        },"确认购买商家优惠？")
      },
      payBtn1(){
        // alert(this.type+','+this.buyPrice+','+159)
        let userAgentObj = navigator.userAgent;
        if(userAgentObj.match(/Android/i)){
          window.control.payDialog(0.01);
        }else if(userAgentObj.match(/iPhone/i)){
          payDialog(0.01);
        }

      }
    }
  }
</script>
<style scoped>
  @import "../styles/styles.css";
  .loading{ background: rgba(0,0,0,0.5); position: absolute; width: 100%; height: 100%; top: 0; z-index: 110;}
  .loading>img{ position: absolute; top: 50%; left: 50%;  width: 1.8rem; margin-left: -0.9rem; margin-top: -0.9rem;}
  .headPic{ width: 1.66rem; height: 1.66rem; padding: 0; margin: 0 auto; position: absolute; left: 50%; margin-left: -0.83rem; top: -0.83rem; border-radius: 50%; overflow: hidden; z-index: 100;}
  .headPic>img{ max-width: 100%; max-height: 100%; margin: 0 auto;}
  .my-p{ padding: 1rem 0.5rem 0.75rem;}
  .my-p>img{ width: 100%; }
  .screen{ width: 85%; margin: auto; background-color: #fff; text-align: center;  box-shadow: 0 0 0.4rem rgba(194,194,194,0.25); border-radius: 0.1rem; height: auto; padding: 0; position: relative;}
  .distance{ font-size: 14px; padding-bottom: 2rem;}
  .distance span{ margin:0 0.05rem;}
  .fall>p{ padding:2rem 1rem;}
  .dis{ font-size: 34px; color: #666; background-color: #eee; border-radius: 0.05rem; padding: 0 0.1rem; border-bottom: 1px solid #fff; border-right: 1px solid #fff; box-shadow: 0.02rem 0.03em #ddd;}
  .fall{
    width:100%;
    height:100%;
  }
  .container{
    position: relative;
    width: 100%;
    height: 100%;
  }
  .main,.main1{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    background:url(../styles/asset/overOrderbBanber.jpg) no-repeat  #f6f6f6;
    background-size:100%;
  }
  .mainbg{
    background:url(../styles/asset/overOrderbBanber1.png) no-repeat  #f6f6f6;
    background-size:100%;
  }
  .main1{
    background:url(../styles/asset/bg1.png) no-repeat  #f6f6f6;
    background-size:100%;
  }
  .header{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    width:3.70rem;
    height:0.5rem;
    margin:1.7rem auto 0;
  }
  .left-btn{
    width:1.6rem;
    height:0.5rem;
    font-size: 14px;
    text-align: center;
    line-height: 0.5rem;
    border-radius: 0.3rem;
    background: #ffeab5;
    color:#ff5d2e;
  }
  .right-btn{
    width:1.6rem;
    height:0.5rem;
    font-size: 14px;
    text-align: center;
    line-height: 0.5rem;
    border-radius: 0.3rem;
    background: #ffeab5;
    color:#ff5d2e;
  }
  .list-box{
    overflow-y: auto;
    width:6.9rem;
    margin:0.32rem auto 0;
  }
  .main1 .list-box{
    margin:1.32rem auto 0;
  }
.list-box::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}
.list-box::-webkit-scrollbar {
  width: 5px;
  height: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.list-box::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  min-height: 28px;
}
.list-box::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
  .item{
    overflow: hidden;
    width:100%;
    min-height:3.5rem;
    padding:0.22rem 0.2rem 0 0.2rem;
    margin-bottom: 0.4rem;
    border-radius: 0.15rem;
    background: #fff;
    color:#999;
  }
  .main1 .item{
    min-height:3rem;
  }
  .item-top{
    padding-bottom:0.19rem;
    border-bottom:1px solid #efefef;
  }
  .tit{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
  }
  .item-tit{
    width:4.2rem;
    font-size:0.34rem;
    line-height: 0.5rem;
    font-weight: 600;
    font-family:SimSun;
    color:#333;
  }
  .member{
    height:0.34rem;
    /* width:1.2rem; */
    padding:0 0.1rem;
    margin-top:0.04rem;
    font-size:0.24rem;
    line-height:0.32rem;
    border:1px solid #ff5d2e;
    border-radius: 0.05rem;
    color:#ff5d2e;
  }
  .sub-tit{
    font-size:0.23rem;
    line-height: 0.4rem;
    font-family:"Microsoft YaHei";
    color:#666;
  }
  .phone-text,.adder,.time{
    margin-top:0.21rem;
    font-size:0.21rem;
    color:#999;
  }
  .adder,.time{
    margin-top:0.01rem;
  }
  .pay-btn{
    width:6.9rem;
    height:0.8rem;
    margin-top:0.2rem;
    margin-left:-0.2rem;
    text-align: center;
    font-size:0.28rem;
    font-weight: 600;
    line-height:0.8rem;
    background: #ff5d2e;
    color:#fff;
  }
  .adder .text{
    color:#333;
  }
  .pay-btn i{
    position: relative;
    top:0.02rem;
    left:0.06rem;
    display:inline-block;
    width:0.27rem;
    height:0.27rem;
    background:url(../styles/asset/into.png) no-repeat;
    background-size:100% 100%;
  }


/*.commodity_attr_box {
  height: 5.70rem;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: #fff;
  border:1px solid red;
}
.pop-up-header{
  position:relative;
  height:1.03rem;
  line-height: 1.03rem;
  text-align: center;
  font-size:0.31rem;
  background: #f7f7f7;
  color:#333;
}
.pop-up-header text{
  display: inline-block;
  position:absolute;
  top:0.25rem;
  right:0.10rem;
  width:0.60rem;
  height:0.60rem;
  line-height: 0.60rem;
}
.pop-up-body{
  margin:0 0.43rem;
}
.type{ font-size: 14px; padding: 0.35rem 0.42rem 0;}
.type1{
  padding-top:0.1rem;
}
.type span{
  display: inline-block;
  height: 0.4rem;
  float: left;
}
.type em{
  display: inline-block;
  height:0.4rem;
  margin-left:0.16rem;
  padding:0 0.15rem;
  border-radius: 0.32rem;
  border-bottom-left-radius: 0;
  background: #ff524c;
  font-style: normal;
  font-weight: bold;
  color: #ffffff;
  font-size: 12px;
  float: left;
}
.type>label{ padding: 0.2rem 0; display: block; line-height: 0.4rem;}
.type>h2{ font-size: 14px; padding: 0.2rem 0;}
.type input{ display: none;}
.btn{ background: url("../../activities/styles/asset/charge/czfx-04.png") no-repeat; background-size: contain; display: block; width: 5.5rem; margin: 0.2rem auto 0; height: 1.6rem; line-height: 1.34rem; text-align: center; color: #fff; padding: 0;  font-size: 14px;}
.icon{
  background-size: contain;
  width: 0.36rem;
  height: 0.36rem;
  float: left;
  margin-right: 0.2rem;
  background-repeat: no-repeat;
  background-position: center;
}
.icon1{
  width:0.33rem;
  height:0.33rem;
}
.icon-money{ background-image: url("../../activities/styles/asset/charge/dollarxin.png")}
.icon-alipay{ background-image: url("../../activities/styles/asset/charge/alipayxin.png")}
.icon-wepay{ background-image: url("../../activities/styles/asset/charge/wchatxin.png")}
.selectIcon{background: url("../../activities/styles/asset/charge/empty.png") no-repeat; background-size: contain; width: 0.3rem; height: 0.3rem; float: right; margin-top: 0.05rem;}
.selectIcon.selected{ background-image: url("../../activities/styles/asset/charge/right.png")}*/

.pop-up-header{
  position:relative;
  height:1.03rem;
  line-height: 1.03rem;
  text-align: center;
  font-size:0.31rem;
  background: #f7f7f7;
  color:#333;
}
.pop-up-header text{
  display: inline-block;
  position:absolute;
  top:0.25rem;
  right:0.10rem;
  width:0.60rem;
  height:0.60rem;
  line-height: 0.60rem;
}
.practical{
  width:92%;
  height:1.18rem;
  margin:0 auto;
  font:0.28rem/1.18rem "Microsoft Yahei";
  color:#333;
  border-bottom:1px solid #f6f6f6;
}
.practical span{
  float:right;
}
.type{
  width:92%;
  height:1.64rem;
  margin:0.22rem auto 0;
  padding: 0.35rem  0;
  font-size: 14px;
}
.type1{
  padding-top:0.1rem;
}
.type span{
  display: inline-block;
  height: 0.4rem;
  float: left;
}
.type em{
  display: inline-block;
  /*padding:0 0.15rem;*/
  border-radius: 0.32rem;
  border-bottom-left-radius: 0;
  background: #ff524c;
  font-style: normal;
  font-weight: bold;
  color: #ffffff;
  font-size: 12px;
  float: left;
}
.type>label{ padding: 0.2rem 0; display: block; line-height: 0.4rem;color:#333;}
.type>h2{ font-size: 14px; padding: 0.2rem 0;}
.type input{ display: none;}
.btn{background: #ff5d2e; width: 84%;border-radius: 0.5rem;height:1rem; margin: 0.2rem auto 0; line-height: 1rem; text-align: center; color: #fff; padding: 0;  font-size: 14px;}
.icon{
  background-size: contain;
  width: 0.36rem;
  height: 0.36rem;
  float: left;
  margin-right: 0.2rem;
  background-repeat: no-repeat;
  background-position: center;
}
.icon1{
  width:0.33rem;
  height:0.33rem;
}
.icon-money{ background-image: url("../../activities/styles/asset/charge/dollarxin.png")}
.icon-alipay{ background-image: url("../../activities/styles/asset/charge/alipayxin.png")}
.icon-wepay{ background-image: url("../../activities/styles/asset/charge/wchatxin.png")}
.selectIcon{background: url("../../activities/styles/asset/charge/empty.png") no-repeat; background-size: contain; width: 0.3rem; height: 0.3rem; float: right; margin-top: 0.05rem;}
.selectIcon.selected{ background-image: url("../../activities/styles/asset/charge/right.png")}
  @keyframes fadeInUpBig {
    from {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
      to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInDownBig {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translate3d(0, 3.5rem, 0);
    }
  }
  .shade{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:all .3s;
  }
  .shade.bg{
    background:rgba(0,0,0,0.6);
  }
  .share{
    width: 100%;
    height: 5.70rem;
    background-color: #fff;
    transform: translateY(100%);
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 5;
    color:#eee;
  }
  .fadeInUpBig {
    animation-duration: .4s;
    animation-fill-mode: both;
    animation-name: fadeInUpBig;
  }
  .fadeInDownBig {
    animation-duration: 0.6s;
    animation-fill-mode: both;
      animation-name: fadeInDownBig;
  }

  .note{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: -1;
    width: 100%;
    height:100%;
    transition:'z-index' .3s;
    /* transition:top 0s; */
  }
  .note.bg{
    background:rgba(0,0,0,0.6);
  }
  .dialog{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-3rem;
    margin-top:-2.9rem;
    width:6rem;
    height:5.80rem;
    border-radius:0.2rem;
    background:#fff;
  }
  .note-tit{
    display:block;
    width:3.85rem;
    height:0.35rem;
    margin:0.52rem auto 0.3rem;
    background:url(../styles/asset/shiy.png) no-repeat;
    background-size: 100% 100%;
  }
  .note_content{
    width:5.20rem;
    height:3.4rem;
    margin:0.44rem auto 0;
    font:0.24rem/0.38rem "Microsoft YaHei";
    color:#333;
  }
  .note_content span{
    color:#999;
  }

  .clear_send{
    position: absolute;
    bottom:0;
    width:100%;
    height:0.92rem;
    margin-top:0.23rem;
    border-radius:0.2rem;
    text-align:center;
    font:0.24rem/0.92rem "Microsoft Yahei";
    color:#ff5d2e;
    background: #f2f2f2;
  }
  .modal_show{
    z-index: 100;
  }
  .goback{
    position: absolute;
    left:0;
    top:60%;
    z-index:10;
    width:1.03rem;
    height:0.5rem;
    text-align: center;
    font:0.24rem/0.50rem "Microsoft Yahei";
    border-radius:  0 0.3rem 0.3rem 0;
    background: #ff5d2e;
    color:#fff;
  }
  .noAd,.nodata{
    overflow: hidden;
    width:6.9rem;
    height:8rem;
    margin:2.34rem auto;
    border-radius: 0.15rem;
    background: url(../styles/asset/noad.jpg) no-repeat 1.7rem 2.6rem #fff;
    background-size:3.57rem 2.11rem ;
  }
  .noAd p,.nodata p{
    text-align: center;
    margin-top:4.7rem;
    color:#666;
  }
</style>




<!-- <template>
  <section class="container">
    <transition name="fade-in">
      <div v-if="state">
        <div class="screen">
          <div class="headPic">
            <img :src="this.img" >
          </div>
          <p v-text="phoneNo" class="phone"></p>
          <div class="my-p">
            <img :src="require('../styles/asset/p1.png')">
          </div>
          <div class="distance" v-show='timeShow'>
            <span v-if="hourState" ><span v-text="dur" class="dis"></span><span v-text="dua" class="dis"></span><span>小时</span></span>
            <span><span v-text="minT" class="dis"></span><span v-text="minS" class="dis"></span><span>分钟</span></span>
          </div>
        </div>
        <div v-if="prizeOpen" @click="goGetAward()" class="prizeButton">
          <img :src="require('../styles/asset/prize.png')">
        </div>
      </div>
    </transition>
    <transition name="fade-in">
      <div class="fall" v-if="!state"  @click="retry()">
        <p>出错了！点击重试！</p>
      </div>
    </transition>
    <transition name="fade-in">
      <div class="loading" v-if="loading">
        <img :src="require('../styles/asset/loading.gif')" />
      </div>
    </transition>
  </section>
</template>
<script>

  let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  };

  export default{
    data () {
      return {
        token:"",
        areaCode:"",
        img:require('../styles/asset/tx.png'),
        orderId:"",
        dur:'',
        dua:'',
        minT:'',
        minS:'',
        phoneNo:"",
        state:true,
        loading:false,
        hourState:false,
        prizeOpen:false,
        timeShow:false
      }
    },
    mounted(){
      const _this = this;
      let url = window.location.href;
      this.orderId = filters.parseURL(url).params.orderId;
      this.areaCode = filters.parseURL(url).params.areaCode;
      this.$util.getUserToken().then(token=>{
        _this.token = token;
        _this.getOrderInfo();
        _this.getHeadImg();
      }).catch(e=>{
        this.state = false;
      })
    },
    methods: {
      goGetAward(){
        let apiRoot = process.env.API_ROOT;
        if(apiRoot.indexOf('d-api')>=0)
        {
          window.location.href = 'http://wx.youdui.org/app/activity_SG/pmd.html?actId=ZKJ_SG&areaId=0'
        }else{
          window.location.href = 'http://weixin.udui.com/app/activity_SG/pmd.html?actId=ZKJ_SG&areaId=0'
        }
      },
      switchState(){
        let _this = this;
        _this.$api.get('/sys/v1/authApi/getParams?areaCode=' + _this.areaCode,{},s=>{
          s.module.forEach(function(e){
            if(e.paramKey == 'INVITER_SWITCH' && e.paramValue == '1'){
              _this.prizeOpen = true;
            }
          })
        },f=>{

        },{
          "token": this.token
        })
      },
      getHeadImg(){
        //this.loading = true;
        this.$api.post('/user/v1/authApi/index',{},s=>{
          this.state = true;
          if(s.module.avatarUrl != null && s.module.imgsHostDomain.indexOf('http:')>=0)
          {
            this.img = s.module.imgsHostDomain.substr(5)  + s.module.avatarUrl;
          }else if(s.module.avatarUrl != null && s.module.imgsHostDomain.indexOf('https:')>=0)
          {
            this.img = s.module.imgsHostDomain.substr(6)  + s.module.avatarUrl;
          }
          this.phoneNo = s.module.phone;
        },f=>{
          //this.loading = false;
          this.state = false;
        },{
          "token": this.token
        });

      },
      getOrderInfo(){
        let _this = this;
        _this.$api.post('/myOrder/v1/authApi/myOrder/detail?orderId='+this.orderId,{},s=>{
          _this.timeShow = true;
          let xtime = s.module.duration;
          if(!xtime)
          {
              xtime = 0;
          }
          _this.setTime(parseInt(xtime));
          //this.loading = false;
        },f=>{
          //this.loading = false;
          _this.state = false;
        },{
          "token": _this.token
        });
        _this.switchState();
      },
      setTime(duration){
        if(duration<10)
        {
          this.minT = 0;
          this.minS = duration;
        }else if(duration<60){
          this.minT = duration.toString().substr(0,1);
          this.minS = duration.toString().substr(1,2);
        }else{
          this.hourState = true;
          this.dur = parseInt(duration/60)>9 ? parseInt(duration/60).toString().substr(0,1): 0;
          this.dua = parseInt(duration/60)>9 ? parseInt(duration/60).toString().substr(1,2): parseInt(duration/60);
          this.minT = (duration%60)>9 ? (duration%60).toString().substr(0,1):0;
          this.minS = (duration%60)>9 ? (duration%60).toString().substr(1,2):(duration%60);
        }
      },
      retry () {
        const _this = this;
        let url = window.location.href;
        this.orderId = filters.parseURL(url).params.orderId;
        this.$util.getUserToken().then(token=>{
          _this.token = token;
          _this.getOrderInfo();
          _this.getHeadImg();
        })
      }
    }
  }
</script>
<style scoped>
  @import "../styles/styles.css";
  .loading{ background: rgba(0,0,0,0.5); position: absolute; width: 100%; height: 100%; top: 0; z-index: 110;}
  .loading>img{ position: absolute; top: 50%; left: 50%;  width: 1.8rem; margin-left: -0.9rem; margin-top: -0.9rem;}
  .container{ position: relative; width: 100%; height: 100%; background: #fff; overflow: auto; padding-top: 1.35rem;}
  .headPic{ width: 1.66rem; height: 1.66rem; padding: 0; margin: 0 auto; position: absolute; left: 50%; margin-left: -0.83rem; top: -0.83rem; border-radius: 50%; overflow: hidden; z-index: 100;}
  .headPic>img{ max-width: 100%; max-height: 100%; margin: 0 auto;}
  .my-p{ padding: 1rem 0.5rem 0.75rem;}
  .my-p>img{ width: 100%; }
  .screen{ width: 85%; margin: auto; background-color: #fff; text-align: center;  box-shadow: 0 0 0.4rem rgba(194,194,194,0.25); border-radius: 0.1rem; height: auto; padding: 0; position: relative;}
  .distance{ font-size: 14px; padding-bottom: 2rem;}
  .distance span{ margin:0 0.05rem;}
  .fall>p{ padding:2rem 1rem;}
  .dis{ font-size: 34px; color: #666; background-color: #eee; border-radius: 0.05rem; padding: 0 0.1rem; border-bottom: 1px solid #fff; border-right: 1px solid #fff; box-shadow: 0.02rem 0.03em #ddd;}
  .phone{ font-size: 22px; padding: 1.3rem 0 0; text-align: center; }
  .fall{ padding: 1rem 0; text-align: center;}
  .prizeButton{ padding: 0 0.15rem 0.15rem; }
  .prizeButton>img{ width: 100%;}
</style>
